<template>
  <div style="display: none">
    <div id="printMe"   >
      <div style="position: relative; width: 100%;">

        <el-col :span="23"  v-for="item in multipleSelection" :key="item.washCode" :style="{marginTop: item.accessorVoList? '12px':'13px',display:'flex'} ">

         <el-col :span="4" style="display: flex; flex-direction: column; ">
          
         </el-col>
          <el-col :span="12" style="display: flex; flex-direction: column; ">
            <div>
                 <QrcodeVue :value="item.washCode" :size="50" />
            </div>
            <div>{{item.washCode}}</div>
          </el-col>

        <el-col :span="8" >
          
          <el-row >
            <span style="font-size: 12px; font-weight: 700;">{{item.selfOperated==1 ?'自营':'非自营'}}</span>  <span  style="font-size: 12px; font-weight: 700;">{{item.srgCode}}</span>  <span style="font-size: 8px; font-weight: 700;">{{item.index}}</span>
          </el-row>

          <el-row>
            <span style=" font-weight: 700;font-size:10px;">{{customerDetail.customName}}</span>  <span  style="font-weight: 700;font-size:10px;">{{customerDetail.customPhone}}</span>  
          </el-row>

          
            <el-row v-if="item.type==0" style="font-size:10px;border-radius: 6px;" >
              <span>{{item.typeName}}</span>  
           </el-row>

            <el-row style="font-size:8px;overflow: hidden; white-space: nowrap; " v-if="item.type==1 && item.accessorVoList">
            <span >配：
              <span v-for="(accessorVoIteam,index) in item.accessorVoList" :key="accessorVoIteam.id" >
                  {{index==item.accessorVoList.length-1? accessorVoIteam.type:accessorVoIteam.type+","}}
              </span>
          </span>  
         </el-row>

           <el-row style="padding-right: 10px; font-size:10px; overflow: hidden; white-space: nowrap;" v-if="item.remark">
            <span style="font-weight: 700;" v-for="(remark,index) in item.remarks" :key="remark">
                {{index==item.remarks.length-1? remark:remark+","}}
            </span>
          </el-row>


        </el-col>
      </el-col>

        <!-- <div  v-for="item in multipleSelection" :key="item.washCode">
              
        </div> -->
       

  
      <!--    -->

      

        <!-- <div v-if="item.washType !== '普洗'">
          <img
            style="width: 14px; height: 14px; display: block"
            src="@/assets/icons/svg/print.png"
            alt=""
          />
          <img
            style="width: 14px; height: 14px; display: block"
            src="@/assets/icons/svg/print.png"
            alt=""
          />
          <img
            style="width: 14px; height: 14px; display: block"
            src="@/assets/icons/svg/print.png"
            alt=""
          />
        </div> -->
        <!-- <div style="display: flex; justify-content: center; width: 50%">
          <QrcodeVue :value="item.washCode" :size="64" />
        </div>

        <div
          style="flex: 1; margin-left: 10px; font-size: 12px; line-height: 16px"
        >
          <div>手机号码：{{ phone }}</div>
          <div>{{ item.washCode }}</div>
          <div>
            类型：{{ item.washType }}
            <span style="margin-left: 20px">{{ item.index }}</span>
          </div>
          <div>
            刷鞋匠(货架号)：{{ item.srgCode }}

            <span
              style="margin-left: 20px"
              v-if="customerDetail && customerDetail.remark"
            >
              {{ customerDetail.remark }}
            </span>
          </div>
        </div> -->
        <!-- <div v-if="item.washType !== '普洗'">
          <img
            style="width: 14px; height: 14px; display: block"
            src="@/assets/icons/svg/print.png"
            alt=""
          />
          <img
            style="width: 14px; height: 14px; display: block"
            src="@/assets/icons/svg/print.png"
            alt=""
          />
          <img
            style="width: 14px; height: 14px; display: block"
            src="@/assets/icons/svg/print.png"
            alt=""
          />
        </div> -->
      </div>
    </div>

    <button ref="printWashCodeBtn" @click="setTime" v-print="printObj"></button>
  </div>
</template>

<script>
import { formatDateTime } from "@/utils/formate";
import QrcodeVue from "qrcode.vue";
export default {
  props: ["multipleSelection", "phone", "customerDetail"],
  components: {
    QrcodeVue,
  },
  data() {
    return {
      printObj: {
        id: "printMe",
        popTitle: "打印水洗码",
      },
      printTime: "",
    };
  },

  methods: {
    formatDateTime,
    setTime() {
      this.printTime = formatDateTime(
        new Date().getTime(),
        "YYYY-MM-DD HH:mm:ss"
      );
    },
  },
};
</script>
<style>
#printMe{
  display: flex;
  flex-direction: row;
  /* justify-content: center; */
  position: relative;
  height: 100%;
  width: 100%;
}

</style>